<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--导入外部css样式文件-->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <link rel="stylesheet" href="../../styles/common.css" />
    <link rel="stylesheet" href="../../styles/page.css" />
<!--按钮样式-->
    <style>
       /* .el-row {
            margin-bottom: 20px; &:last-child {
             margin-bottom: 0;
         }
        }
        .el-col {
            border-radius: 4px;
        }*/
        .bg-purple-dark {
            background: #ffffff;

            padding-left: 60px;
        }
        .bg-purple {
            background: #fffbf0;
            padding-left: 20px;
            line-height: 50px;
        }
       /* .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 10px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }*/
    </style>
</head>
<body>
<div class="dashboard-container" id="count-app">
    <template>
        <div>
            <el-radio-group v-model="radio1" @change="changeRadio"   >
                <el-radio-button label="今日"> </el-radio-button>
                <el-radio-button label="昨日"> </el-radio-button>
                <el-radio-button label="近7天"> </el-radio-button>
                <el-radio-button label="近30天"> </el-radio-button>
            </el-radio-group>


        </div>

    </template>
    <div>
        <p></p>
    </div>
<!--    数据概览-->
    <div class="container">
        <div class="tableBox">
        <el-row>
            <el-col :span="23">
                <div class="grid-content bg-purple-dark">
                    <h3>数据概览</h3>
                    <el-row :gutter="40">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <p>营业额</p>
                                <h1>{{sumAmount}}</h1>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <p>已完成订单</p>
                                <h1>{{orderAlready}}</h1>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <p>用户总量</p>
                                <h1>{{sumUser}}</h1>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <p>新增用户</p>
                                <h1>{{addSum}}</h1>
                            </div>
                        </el-col>

                    </el-row>
                </div>
            </el-col>
        </el-row>
        </div>
    </div>

    <div>
        <p></p>
    </div>

    <div>
        <div id="category" class="container" style="width: 750px; height: 400px;float: left">

        </div>
        <div id="user" class="container" style="width: 750px; height: 400px; float: right">

        </div>
    </div>
</div>
<!--引入外部的echarts的js文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/index.js"></script>

<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/count.js"></script>


<script>
    new Vue({
        el:"#count-app",
        data(){
            return {
                radio1: '今日',
                time:1,
                sumAmount:'',
                orderAlready:'',
                sumUser:'',
                addSum:'',
                days:[],
                number:[],
                udays:[],
                num:[]
            };
        },
        //钩子函数
        created(){
            countApi(this.time).then(res=>{
                if (String(res.code) === '1'){
                    this.sumAmount = res.data.sumMoney
                    this.orderAlready = res.data.sumOrder
                    this.sumUser = res.data.sumUser
                    this.addSum = res.data.addUser
                    Object.keys(res.data.daysWithMoney).map((key,item)=>{
                        this.days.push(key)
                        this.number.push(res.data.daysWithMoney[key])
                        console.log(this.days,this.number)
                    })
                    Object.keys(res.data.daysWithUser).map((key,item)=>{
                        this.udays.push(key)
                        this.num.push(res.data.daysWithUser[key])
                        console.log(this.udays,this.num)
                    })
                    this.moneyInit()
                    this.userInit()
                    // const map1 = new Map();
                    // map1.set( res.data.daysWithMoney);
                    // this.days = map1.keys();


                    // console.log(this.days )
                    // console.log(map1 )
                    console.log(res.data)
                }else {
                    this.$message.error('请求出错了：' + err)
                }
            })
        },
        mounted(){
            this.userInit()

        },
        methods:{
            changeRadio(val){
                let time = val;
                if (time === "今日"){
                    time = 1;
                }else if(time ==="昨日"){
                    time = 2;
                }else if(time ==="本周"){
                    time = 3;
                }else {
                    time = 4;
                }
                this.days=[]
                this.number=[]
                this.udays=[]
                this.num=[]
                countApi(time).then(res =>{
                    if (String(res.code) === '1'){
                        this.sumAmount = res.data.sumMoney
                        this.orderAlready = res.data.sumOrder
                        this.sumUser = res.data.sumUser
                        this.addSum = res.data.addUser
                        Object.keys(res.data.daysWithMoney).map((key,item)=>{
                            this.days.push(key)
                            this.number.push(res.data.daysWithMoney[key])
                            console.log(this.days,this.number)
                        })
                        Object.keys(res.data.daysWithUser).map((key,item)=>{
                            this.udays.push(key)
                            this.num.push(res.data.daysWithUser[key])
                            console.log(this.udays,this.num)
                        })
                        this.moneyInit()
                        this.userInit()
                    }else {
                        this.$message.error('请求出错了：' + err)
                    }
                })
                console.log(time)
            },
            moneyInit() {
                echarts.init(document.getElementById('category')).setOption({
                    title: {
                        text: '营业额',
                        textStyle: {
                            fontSize:20
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.days
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.number,
                            type: 'line',
                            smooth: true
                        }
                    ]
                })
            },
            userInit() {
                echarts.init(document.getElementById('user')).setOption({
                    title: {
                        text: '每日新增用户',
                        textStyle: {
                            fontSize:20
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        data: this.udays
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: this.num,
                            type: 'line',
                            smooth: true
                        }
                    ]
                })
            },

        }
    }
    )

</script>
</body>
</html>